.coupon {
  .main {
    height: 94vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .nav {
      width: 100%;
      text-align: center;
      color: #202228;
      font-weight: 700;
      font-size: 32px;
      margin-top: 40px;
    }
    section {
      width: 100%;
      display: flex;
      justify-content: center;
      .card {
        width: 15%;
        height: 400px;
        border-radius: 8px;
        box-shadow: 0rem 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%),
          0rem 0.125rem 0.25rem -0.0625rem rgb(0 0 0 / 6%);
        text-align: center;
        background: #f0f1f4;
        overflow: hidden;
        margin: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;

        hgroup {
          width: 100%;
          text-align: center;
          font-size: 18px;
          background-color: #0098d9;
          color: #fff;
          font-size: 18px;
          font-weight: 700;
          line-height: 56px;
        }

        .ant-btn {
          border-radius: 8px;
          background-color: #0098d9;
          width: 90%;
          height: 48px;
          margin-bottom: 10px;
        }
        figure {
          font-size: 18px;
          font-weight: 700;
          color: #0098d9;
          margin-top: 20px;
          span {
            background: #fff;
            border-radius: 12px;
            padding: 3px 30px;
          }
        }

        > div {
          dl {
            text-align: center;
            font-size: 18px;
            font-weight: 400;
            margin-top: 20px;
            dt {
              font-size: 32px;
            }
          }
        }
      }

      .card:hover {
        transition: all 0.5s ease 0s;
        background-color: #fff;
        box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
      }

      .card:nth-of-type(2) {
        hgroup {
          background-color: #13ae89;
        }

        .ant-btn {
          background-color: #13ae89;
        }
      }

      .card:nth-of-type(3) {
        hgroup {
          background-color: #f19222;
        }

        .ant-btn {
          background-color: #f19222;
        }
      }

      .card:nth-of-type(4) {
        hgroup {
          background-color: #cc0033;
        }

        .ant-btn {
          background-color: #cc0033;
        }
      }
    }
  }

  aside {
    width: 100%;
    text-align: center;
    .ant-btn {
      height: 40px;
      width: 120px;
      margin-top: 20px;
      color: #008da5;
      font-weight: 700;
      font-size: 15px;
    }
  }

  .footer {
    font-size: 18px;
    h1 {
      width: 100%;
      font-size: 18px;
      margin-bottom: 20px;
      text-align: center;
      color: #131518;
    }
  }
}
.modal_purchase {
  text-align: center;
  .ant-table-thead {
    .ant-table-cell {
      background: #dce0ed;
    }
  }
  .ant-table-tbody {
    tr:nth-child(2n) {
      background: #f0f1f4;
    }
  }
  .ant-modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    >div{
        width: 100%;
        margin: 20px 0;
    }
    .ant-btn {
      width: 120px;
      margin-top: 20px;
      color: #008DA5;
    }
  }
  .ant-modal-header {
    .ant-modal-title {
      font-size: 20px;
      margin-bottom: 20px;
      text-align: center;
    }
  }
}
